<template>
  <div class="grey_bg">
    <navigate>查看测评结果 </navigate>
    <div class="main_content">
      <div class="tabs_box">
        <div
          class="tabs_item"
          @click="selectTab(1)"
          :class="{ is_current: currentTab == 1 }"
        >
          查看测评结果
        </div>
        <div
          class="tabs_item"
          @click="selectTab(2)"
          :class="{ is_current: currentTab == 2 }"
        >
          查看答题情况
        </div>
        <div
          class="tabs_item"
          @click="selectTab(3)"
          :class="{ is_current: currentTab == 3 }"
          v-if="type == 1 || type == 2"
        >
          查看报告解读
        </div>
      </div>
      <!-- 查看测评结果 -->
      <look-done-result
        v-show="currentTab == 1"
        :info="info"
        :type="type"
      ></look-done-result>
      <!-- 查看答题情况 -->
      <look-done-statuation
        v-show="currentTab == 2"
        ref="lookDoneStatuation"
        :questionList="questionList"
        :ratingScaleName="info.rating_scale_name"
        :type="type"
      ></look-done-statuation>
      <!-- 查看报告解读 -->
      <unscramble
        v-if="currentTab == 3"
        ref="unscramble"
        :type="type"
        :id="info.id"
        @getSelfEvaluationInfo="getSelfEvaluationInfo"
        @getTaskEvaluationReport="getTaskEvaluationReport"
      ></unscramble>
    </div>
  </div>
</template>

<script>
import {
  querySelfEvaluationInfo,
  queryTaskEvaluationReport,
} from "@/api/evaluation/index";
import { queryOnlineEvaluationInfo } from "@/api/consultation/online";
import { queryOfflineEvaluationInfo } from "@/api/consultation/offline";
import lookDoneResult from "@/views/core/lookDoneResult.vue";
import lookDoneStatuation from "@/views/core/lookDoneStatuation.vue";
import unscramble from "@/views/core/unscramble.vue";
export default {
  data() {
    return {
      currentTab: 1,
      questionList: [],
      info: {},
      type: null, //1是自我测评报告 2是任务测评报告 3是线上测评 4是线下测评
      id: null,
    };
  },
  components: {
    "look-done-result": lookDoneResult,
    "look-done-statuation": lookDoneStatuation,
    unscramble,
  },
  created() {
    this.type = Number(this.$route.query.type);
    this.id = this.$route.query.id;
    if (this.type == 1) {
      this.getSelfEvaluationInfo(this.$route.query.id);
    } else if (this.type == 2) {
      this.getTaskEvaluationReport(this.$route.query.id);
    } else if (this.type == 3) {
      this.getyOnlineEvaluationInfo(this.$route.query.id);
    } else if (this.type == 4) {
      this.getOfflineEvaluationInfo(this.$route.query.id);
    }
  },
  methods: {
    //线下测评获取测评报告
    async getOfflineEvaluationInfo(id, val) {
      let res = await queryOfflineEvaluationInfo({ id });
      if (res.code === 200) {
        this.info = res.data.info;
        this.questionList = res.data.QuestionList;
      }
    },
    //线上测评获取测评报告
    async getyOnlineEvaluationInfo(id, val) {
      let res = await queryOnlineEvaluationInfo({ id });
      if (res.code === 200) {
        this.info = res.data.info;
        this.questionList = res.data.QuestionList;
      }
    },
    //任务测评获取测评报告
    async getTaskEvaluationReport(id, val) {
      let res = await queryTaskEvaluationReport({ id });
      if (res.code === 200) {
        this.info = res.data;
        if (val) {
          this.selectTab(3);
        }
      } else if (res.code == 0) {
        setTimeout(() => {
          this.$router.back();
        }, 2000);
      }
    },
    //自我测评获取所有数据
    async getSelfEvaluationInfo(id, val) {
      let res = await querySelfEvaluationInfo({ id });
      if (res.code === 200) {
        this.info = res.data.info;
        this.questionList = res.data.QuestionList;
        if (val) {
          this.selectTab(3);
        }
      }
    },
    selectTab(value) {
      this.currentTab = value;
      if (this.currentTab == 2 && this.type == 2) {
        this.$refs.lookDoneStatuation.getInfo(this.id);
      } else if (this.currentTab == 3) {
        this.$nextTick(() => {
          this.$refs.unscramble.getInfo(this.info.is_explain);
        });
      }
    },
  },
};
</script>

<style scoped>
.grey_bg {
  background: #f4f6fa;
  overflow-y: hidden !important;
}

.main_content {
  height: calc(100% - 60px);
  overflow-y: auto;
  padding: 10.42px;
  box-sizing: border-box;
  display: grid;
  gap: 10.42px;
  align-content: flex-start;
}

.tabs_box {
  width: 340px;
  display: flex;
  margin: 0 auto;
}

.tabs_item {
  width: 170.14px;
  height: 34.72px;
  line-height: 34.72px;
  background: #ffffff;
  font-size: 15.28px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  text-align: center;
  color: #333333;
}

.tabs_item:nth-child(1) {
  border-radius: 6.94px 0 0 6.94px;
}

.tabs_item:nth-child(2) {
  border-radius: 0 0px 0 0;
}

.tabs_item:nth-child(3) {
  border-radius: 0 6.94px 6.94px 0px;
}

.is_current {
  font-size: 15.28px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: bold;
  color: #ffffff;
  width: 170.14px;
  height: 34.72px;
  background: linear-gradient(0deg, #ffffff -90%, rgba(255, 255, 255, 0) 100%),
    #0aa7f4;
}
</style>
